/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { loadGoodsDataById, addGoodsAPI } from "../../services/goods";
import { dalImg, getToken } from "../../utils/tools";
import { NavBar, Card, Button, Toast } from "antd-mobile";

function GoodsDetail() {
  const { id } = useParams();
  const [data, setData] = useState([]);
  const nav = useNavigate();

  useEffect(() => {
    //获取药品详情
    loadGoodsDataById(id).then((res) => {
      // console.log(res.data);
      setData(res.data);
    });
  }, []);

  //返回跳转
  const back = () => {
    nav(-1);
  };
  const onClick = () => {
    if (getToken()) {
      addGoodsAPI({ amount: 1, medicine: id }).then(() => {
        Toast.show({
          content: "加入购物车成功",
        });
        nav("/cart");
      });
    } else {
      nav("/login");
    }
  };

  return (
    <div
      className="goods-data"
      style={{
        width: "100%",
        height: "100%",
        backgroundColor: "#8080800f",
      }}
    >
      <div style={{ overflow: "auto", marginBottom: "70px" }}>
        <NavBar
          onBack={back}
          style={{ boxShadow: "inset 0 1px 10px 0 #00ffeade " }}
        >
          {data.name}
        </NavBar>
        <h3
          style={{
            textAlign: "center",
            padding: "15px",
            color: "orangered",
          }}
        >
          {data.name}
        </h3>
        <div>
          <img width="100%" src={dalImg(data.image)} alt="图丢了~~" />
        </div>
        <div>
          <img width="100%" src={dalImg(data.image)} alt="图丢了~~" />
        </div>
        <div>
          <h4 style={{ marginTop: "10px", paddingLeft: "5px" }}>商品详情：</h4>
          <p style={{ padding: "10px", lineHeight: "20px", textIndent: "2em" }}>
            {data.desc}
          </p>
        </div>
      </div>
      <Card
        onClick={onClick}
        style={{ width: "100%", position: "fixed", bottom: 0 }}
      >
        <Button block shape="rounded" color="danger">
          加入购物车
        </Button>
      </Card>
    </div>
  );
}

export default GoodsDetail;
